<template>
  <view class="theme-item">
    <navigator
      :url="`/pages/classList/classList?id=${item._id}&name=${item.name}`"
      class="box"
      v-if="!isMore"
    >
      <!-- 封面 -->
      <image :src="item.picurl" mode="aspectFill" class="pic" />
      <!-- 标题 -->
      <view class="mask">{{ item.name }}</view>
      <view class="tab">{{ formatTimestamp(item.updateTime) }}更新</view>
    </navigator>

    <!-- 更多 跳转分类页 -->
    <navigator
      v-else
      url="/pages/classify/classify"
      open-type="reLaunch"
      class="box more"
    >
      <image src="../../common/images/more.jpg" mode="aspectFill" class="pic" />
      <!-- 标题 -->
      <view class="mask">
        <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
        <view class="text">更多</view>
      </view>
      <view class="tab">3天前更新</view>
    </navigator>
  </view>
</template>

<script setup>
import { formatTimestamp } from "../../utils/time";
const props = defineProps({
  isMore: {
    type: Boolean,
    default: false,
  },
  item: {
    type: Object,
    default: () => {},
  },
});
</script>

<style lang="scss" scoped>
.theme-item {
  .box {
    height: 340rpx;
    border-radius: 10rpx;
    // 防止图片遮住圆角
    overflow: hidden;
    position: relative;
    .pic {
      width: 100%;
      height: 100%;
    }
    .mask {
      width: 100%;
      height: 70rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      // 磨砂遮罩
      backdrop-filter: blur(20px);
      font-weight: 600;
      font-size: 30rpx;
    }
    .tab {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(250, 129, 90, 0.7);
      backdrop-filter: blur(20px);
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 14rpx;
      border-radius: 0 0 15rpx 0;
      transform: scale(0.8);
      // 以左上角为基准
      transform-origin: left top;
    }
  }
  .box.more {
    .mask {
      width: 100%;
      height: 100%;
      flex-direction: column;
    }
    .text {
      font-size: 28rpx;
    }
  }
}
</style>
